<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    text-color="#fff"
    :collapse="isCollapse"
    :collapse-transition="false"
    default-active="/Home"
    style="height: 100%"
    router
  >
    <el-menu-item index="/Home">
      <el-icon><HomeFilled /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item :index="'/' + item.menuclick" v-for="(item, i) in menu" :key="i">
      <el-icon><span v-html="item.menuicon" /></el-icon>
      <template #title>{{ item.menuname }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'Aside',
  data() {
    return {
      //isCollapse:false
      // menu: [
      //   {
      //     menuClick: 'Admin',
      //     menuName: '管理员管理',
      //     menuIcon:
      //       '<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 1024 1024"><path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.87 415.87 0 0 1 299.264-399.104L512 704zM720 304a208 208 0 1 1-416 0a208 208 0 0 1 416 0"/></svg>',
      //   },
      //   {
      //     menuClick: 'User',
      //     menuName: '用户管理',
      //     menuIcon:
      //       '<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 1024 1024"><path fill="currentColor" d="M288 320a224 224 0 1 0 448 0a224 224 0 1 0-448 0m544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z"/></svg>',
      //   },
      // ],
    };
  },
  computed: {
    menu: {
      get() {
        return this.$store.state.menu;
      },
    },
  },
  props: {
    isCollapse: Boolean,
  },
};
</script>

<style scoped></style>
